import './Scss/SupervisionStatistics.scss'
import { ICON } from '../../../../Common/Configure/Icon'
import { useState, useEffect } from 'react'
import { useRequest, useBoolean } from 'ahooks'
import { Http } from '../../../../Common/Api'

export const SupervisionStatistics001 = () => {
    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()
    const [DataOne, setDataOne] = useState([
        { uuid: '1', icon: ICON['cunliangqu'], title: '下单数', value: 0, color: '#FFD97D' },
        { uuid: '2', icon: ICON['cunliangqu'], title: '待审核', value: 0, color: '#78FFFA' },
        { uuid: '3', icon: ICON['cunliangqu'], title: '合格数', value: 0, color: '#BBFF78' },
        { uuid: '4', icon: ICON['cunliangqu'], title: '不合格', value: 0, color: '#FF8E43' },
        { uuid: '5', icon: ICON['cunliangqu'], title: '合格率', value: 0, color: '#71A8FF' },
    ])
    const { run: getConstructionSuperviseNumStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { notOkNum, okNum, okPercent, submittedNum, totalNum } = res
            setDataOne([
                { uuid: '1', icon: ICON['cunliangqu'], title: '下单数', type: '', value: totalNum, color: '#FFD97D' },
                {
                    uuid: '2',
                    icon: ICON['cunliangqu'],
                    title: '待审核',
                    type: '1',
                    value: submittedNum,
                    color: '#78FFFA',
                },
                { uuid: '3', icon: ICON['cunliangqu'], title: '合格数', type: '2', value: okNum, color: '#BBFF78' },
                { uuid: '4', icon: ICON['cunliangqu'], title: '不合格', type: '3', value: notOkNum, color: '#FF8E43' },
                {
                    uuid: '5',
                    icon: ICON['cunliangqu'],
                    title: '合格率',
                    type: '',
                    value: okPercent + '%',
                    color: '#71A8FF',
                },
            ])
        },
    })
    useEffect(() => {
        getConstructionSuperviseNumStat({ url: `getConstructionSuperviseNumStat` })
    }, [getConstructionSuperviseNumStat])

    return (
        <div className="SupervisionStatistics001">
            {DataOne.map(({ uuid, icon, title, value, color, type }) => (
                <div
                    key={uuid}
                    onClick={() => {
                        setParameter({
                            uuid: type,
                            type: 'LargeScreeTable',
                            classification: 'SecondaryWorkingList',
                        })
                        setTrue()
                    }}
                >
                    <div style={{ color }}>
                        {icon}
                        <div>{title}</div>
                    </div>
                    <div>{value}</div>
                </div>
            ))}
        </div>
    )
}
